<script setup lang="ts">
  import HButton from '@/components/common/button/HButton.vue'
  import HDialog from '@/components/common/dialog/HDialog.vue'
  import { HMessageBox } from '@/components/common/message'
  import { useOnSiteVisitTimeVerificationService } from '@/services/module/order/useOrderService'
  import { ref, watch } from 'vue'

  const { verificationForm, verificationLoading, save, resetVerificationForm } =
    useOnSiteVisitTimeVerificationService()

  defineOptions({
    name: 'VerificationOrderCreateTimeModal',
  })

  const emits = defineEmits<{
    (e: 'update'): void
    (e: 'update:modelValue', value: boolean): void
  }>()

  const props = defineProps({
    orderId: {
      type: String,
      default: () => '',
    },
    modelValue: {
      type: Boolean,
      default: () => false,
    },
  })

  const visible = ref(false)

  const closeModal = () => {
    resetVerificationForm()
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  const onSaveClick = async () => {
    const res = await save()
    if (res) {
      if (res.code === 20000) {
        closeModal()
        emits('update')
        return
      }

      HMessageBox.error(res.message)
      return
    }

    HMessageBox.error('保存失败，请稍后重试')
  }

  watch(
    () => props.modelValue,
    (val) => {
      visible.value = val

      if (val) {
        verificationForm.value.workId = props.orderId
      }
    },
  )
</script>

<template>
  <HDialog v-model="visible" @close="closeModal" title="核实时间">
    <el-form
      label-position="top"
      inline-message
      v-loading="verificationLoading"
      class="modal-form-content"
    >
      <el-form-item label="核实时间">
        <el-date-picker
          type="datetime"
          value-format="YYYY-MM-DD HH:ss:mm"
          placeholder="请选择时间"
          v-model="verificationForm.verifiedVisitTime"
        />
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          type="textarea"
          :rows="5"
          v-model.trim="verificationForm.remark"
          maxlength="100"
          show-word-limit
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <HButton is-modal type="primary" @click="onSaveClick">确定</HButton>
      <HButton is-modal @click="closeModal">取消</HButton>
    </template>
  </HDialog>
</template>
